import { Text, View } from 'native-base';
import { CommonStyle } from '../../../../common/commonStyle.ts';
import React, { useEffect, useState } from 'react';
import Field from '../../../../component/Field.tsx';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import QRCodeScannerModal from '../../../../component/QRCodeScannerModal.tsx';

interface IAdditionalFormProps {
  item: IGoodsAdditionalInfo;
  edit?: boolean;
  defaultValue: string;
  onChange: (text: string) => void;
}
export default function AdditionalFormInput({ item, edit, defaultValue, onChange }: IAdditionalFormProps) {
  const [value, setValue] = useState<string>(defaultValue);
  const [modalVisible, setModalVisible] = useState<boolean>(false);

  /**
   * 扫码成功回调
   * @param data
   */
  const handleScanSuccess = (data: any) => {
    setValue(data);
    onChange(data);
    setModalVisible(false);
  };
  return (
    <React.Fragment>
      <View flexDirection={'row'} alignItems={'center'}>
        {item.requiredFlag && !edit && (
          <Text marginRight={1} color={CommonStyle.price}>
            *
          </Text>
        )}
        <Field
          fieldStyls={{ paddingVertical: 4, width: '85%' }}
          labelStyles={{ fontWeight: 'light', fontSize: 12 }}
          placeholder={'请输入'}
          label={item.attrName}
          value={value}
          onChangeText={(text) => {
            setValue(text);
            onChange(text);
          }}
        />
        {item.fieldName === 'barcode' && (
          <View width={'10%'} alignItems={'center'}>
            <MaterialCommunityIcons name={'line-scan'} size={28} onPress={() => setModalVisible(true)} />
          </View>
        )}
      </View>
      <QRCodeScannerModal modalVisible={modalVisible} onScanSuccess={handleScanSuccess} onClose={() => setModalVisible(false)} />
    </React.Fragment>
  );
}
